<script setup>
import { ref, computed } from 'vue'

defineOptions({
    name: 'TurntableGame'
})

const emit = defineEmits(['end'])

const rewardOptions = [
    {
        icon: '2.png',
        deg: 0,
    },
    {
        icon: '1.png',
        deg: 60,
    },
    {
        icon: '3.png',
        deg: 300,
    },
    {
        icon: '5.png',
        deg: 180,
    },
    {
        icon: '4.png',
        deg: 120,
    },
    {
        icon: '6.png',
        deg: 240,
    },
]
function handleGetRewardIcon(url) {
    return new URL(`/src/assets/imgs/turntable/${url}`, import.meta.url).href
}

const rewardIndex = ref(4)
const turnAroundCount = 10 // 转圈次数
const rotateDeg = computed(() => {
    return turnAroundCount * 360 + rewardOptions[rewardIndex.value].deg
})

const action = ref(false)

function handleStart() {
    action.value = true
}

function initTurntable() {
    action.value = false
}

defineExpose({
    handleStart,
    initTurntable
})
</script>

<template>
    <div class="turntable" :style="{ '--rotate-deg': `${rotateDeg}deg` }">
        <img class="turntable-bg" :class="{ rotate: action }" src="@/assets/imgs/turntable/turntable.png"
            alt="turntable">
        <img class="turntable-pointer" src="@/assets/imgs/turntable/pointer.png" alt="pointer">
        <div class="turntable-main" :class="{ rotate: action }" @animationend="emit('end')">
            <ul>
                <li v-for="(reward, key) in rewardOptions" :key="key">
                    <div class="turntable-reward">
                        <div class="turntable-reward-icon">
                            <img class="turntable-reward-icon_img" :src="handleGetRewardIcon(reward.icon)"
                                :alt="reward.type" width="40">
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<style scoped>
@import url(./index.scss);
</style>